import React from "react";

class App extends React.Component{
	
	constructor(){
		super();
		this.input = React.createRef();
	}
	onSubmit(e){
		e.preventDefault();
		
		console.log(this.input.current.value);

		return false;
	}
	render(){
		return (
			<div>
				<header>
					<nav>
						<div className="nav-wrapper">
						<a href="#" className="brand-logo">TodoList</a>
						</div>
					</nav>
				</header>
				<main>
					<div className="row">
						<form className="col s10 offset-s1" onSubmit={this.onSubmit.bind(this)}>  
							<div className="row">
								<div className="col s12">
								<div className="row">
									<div className="input-field col s12">
									<i className="material-icons prefix">list</i>
									<input type="text" id="autocomplete-input" className="autocomplete" name="text" ref={this.input}/>
									<label htmlFor="autocomplete-input">添加或查找</label>
									</div>
								</div>
								</div>
							</div>
						</form>
					</div>
				</main>
				<footer className="page-footer">
					<div className="footer-copyright">
						<div className="container">
							React, GraphQL
						<a className="grey-text text-lighten-4 right" href="#!"></a>
						</div>
					</div>
				</footer>
			</div>
		);
	}
}

export default App;